<template>
    <div id="bodypage">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/homePage' }"><span id = "mainpage">主页</span></el-breadcrumb-item>
            <el-breadcrumb-item><span>销售记录</span></el-breadcrumb-item>
        </el-breadcrumb>
        <div>
            <!-- 搜索页 -->
            <el-dialog
                title="请输入检索关键字"
                :visible.sync="dialogVisible[0].searchPage"
                width="450px"
                :before-close="handleClose">
                <el-form :model="searchData">
                    <el-form-item>
                        <el-input type="number" autocomplete="off" v-model="searchData.keyword"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible[0].searchPage = false">取 消</el-button>
                    <el-button type="success" @click="upSearchData">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 新增页 -->
            <el-dialog
            title="敏盖羊只销售记录表"
            :visible.sync="dialogVisible[1].addPage"
            width="950px"
            :before-close="handleClose">
                <el-form :inline="true" :model="inputValue1">
                    <el-form-item label="购买方" label-width="90px">
                        <el-input type="text" v-model="inputValue1.buyer"></el-input>
                    </el-form-item>
                    <el-form-item label="购买日期" label-width="90px">
                            <el-input type="date" v-model="inputValue1.purchaseDate"></el-input>
                    </el-form-item>
                    <el-form-item label="购买数量" label-width="105px">
                            <el-input  type="number" v-model="inputValue1.purchaseQuantity"></el-input>
                    </el-form-item>
                </el-form>

                <el-form :inline="true" :model="inputValue1" class="demo-form-inline" ref="form">
                    <el-form-item label="单价" label-width="90px">
                        <el-input  type="number" v-model="inputValue1.unitPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="总价" label-width="90px">
                        <el-input  type="number" v-model="inputValue1.totalPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="经办人" label-width="90px">
                        <el-input  type="text" v-model="inputValue1.agent"></el-input>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" :model="inputValue1" class="demo-form-inline" ref="form">
                    <el-form-item label="联系方式" label-width="90px">
                        <el-input  type="number" v-model="inputValue1.contact"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" label-width="90px">
                        <el-input  type="text" v-model="inputValue1.mark"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible[1].addPage = false">取 消</el-button>
                    <el-button type="success" @click="add">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 查看与编辑页 -->
            <el-dialog
                title="敏盖羊只销售记录表"
                :visible.sync="dialogVisible[2].checkPage"
                width="950px"
                :before-close="handleClose">
                <el-form :inline="true" :model="row">
                    <el-form-item label="购买方" label-width="90px">
                        <el-input type="text" v-model="row.buyer"></el-input>
                    </el-form-item>
                    <el-form-item label="购买日期" label-width="90px">
                            <el-input type="date" v-model="row.purchaseDate"></el-input>
                    </el-form-item>
                    <el-form-item label="购买数量" label-width="105px">
                            <el-input  type="number" v-model="row.purchaseQuantity"></el-input>
                    </el-form-item>
                </el-form>

                <el-form :inline="true" :model="row" class="demo-form-inline" ref="form">
                    <el-form-item label="单价" label-width="90px">
                        <el-input  type="number" v-model="row.unitPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="总价" label-width="90px">
                        <el-input  type="number" v-model="row.totalPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="经办人" label-width="90px">
                        <el-input  type="text" v-model="row.agent"></el-input>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" :model="row" class="demo-form-inline" ref="form">
                    <el-form-item label="联系方式" label-width="90px">
                        <el-input  type="number" v-model="row.contact"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" label-width="90px">
                        <el-input  type="text" v-model="row.mark"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer">
                    <el-button id = "checkPageButton" type="danger" @click="dialogVisible[2].checkPage = false">修 改</el-button>
                    <el-button type="success" @click="dialogVisible[2].checkPage = false">关 闭</el-button>
                </span>
            </el-dialog>
            <h2 style="margin:10px 0 0 20px; color: #4b9100;">敏盖羊只销售记录表</h2>
            <template>
                <el-button @click="dialogVisible[0].searchPage = true" round type="success" slot="append" icon="el-icon-search" style="margin: 10px 0 10px 20px;">搜索</el-button>
                <el-button  @click="dialogVisible[1].addPage = true" round type="success" slot="append" icon="el-icon-edit" style="margin: 10px 0 10px 10px;">新增</el-button>
            </template>
            <!-- 表格区 -->
            <el-table max-height="550" :data="tableData.slice((queryInfo.pagenum-1)*queryInfo.pagesize,queryInfo.pagenum*queryInfo.pagesize)" border  :header-cell-style="{background:'#f5f7fa',color:'#606266'}" stripe @row-click="getDetails">
                <el-table-column type="selection" width="35"></el-table-column>
                <el-table-column width="30px"><template slot-scope="scope">{{scope.$index+1}}</template></el-table-column>
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="购买方:">
                                <span>{{ props.row.buyer }}</span>
                            </el-form-item>
                            <el-form-item label="购买日期:">
                                <span>{{ props.row.purchaseDate }}</span>
                            </el-form-item>
                            <el-form-item label="购买数量:">
                                <span>{{ props.row.purchaseQuantity }}</span>
                            </el-form-item>
                            <el-form-item label="单价:">
                                <span>{{ props.row.unitPrice }}</span>
                            </el-form-item>
                        </el-form>
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="总价:">
                                <span>{{ props.row.totalPrice }}</span>
                                </el-form-item>
                            <el-form-item label="经办人">
                                <span>{{ props.row.agent }}</span>
                            </el-form-item>
                            <el-form-item label="联系方式:">
                                <span>{{ props.row.contact }}</span>
                            </el-form-item>
                            <el-form-item label="备注:">
                                <span>{{ props.row.mark }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column sortable prop="buyer" label="购买方" align="center"></el-table-column>
                <el-table-column sortable prop="purchaseDate" label="购买日期" align="center"></el-table-column>
                <el-table-column sortable prop="purchaseQuantity" label="购买数量" align="center"></el-table-column>
                <el-table-column sortable prop="unitPrice" label="单价" align="center"></el-table-column>
                <el-table-column sortable prop="totalPrice" label="总价" align="center"></el-table-column>
                <el-table-column sortable prop="agent" label="经办人" align="center"></el-table-column>
                <el-table-column sortable prop="contact" label="买方联系方式" align="center"></el-table-column>
                <el-table-column sortable prop="mark" label="备注" align="center"></el-table-column>
                <el-table-column  prop="Operate" label="操作" align="center" fixed="right" width="140">
                    <template slot-scope="scope">
                        <el-button-group>
                            <el-tooltip class="item" effect="dark" content="查看编辑" placement="top-start" :enterable="false">
                            <el-button @click="dialogVisible[2].checkPage = true" type="success" icon="el-icon-search"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="删除此行" placement="top-end" :enterable="false">
                                    <el-button type="success" icon="el-icon-delete" @click="delteleitem(scope)"></el-button>
                            </el-tooltip>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return{
                searchData: {
                    keyword: null
                },
                tableData:[{
                    buyer: null,
                    purchaseDate: null,
                    purchaseQuantity: null,
                    unitPrice: null,
                    totalPrice: null,
                    agent: null,
                    contact: null,
                    mark: null
                }],
                inputValue: {
                    buyer: null,
                    purchaseDate: null,
                    purchaseQuantity: null,
                    unitPrice: null,
                    totalPrice: null,
                    agent: null,
                    contact: null,
                    mark: null
                },
                inputValue1: {
                    buyer: null,
                    purchaseDate: null,
                    purchaseQuantity: null,
                    unitPrice: null,
                    totalPrice: null,
                    agent: null,
                    contact: null,
                    mark: null
                },
                row: {
                    buyer: null,
                    purchaseDate: null,
                    purchaseQuantity: null,
                    unitPrice: null,
                    totalPrice: null,
                    agent: null,
                    contact: null,
                    mark: null
                },
                dialogVisible: [
                    { searchPage: false },
                    { addPage: false },
                    { checkPage: false }
                ],
                queryInfo: {
                    query: null,
                    pagenum: 1, // 当前页码
                    pagesize: 5// 当前每页显示的数据数
                },
            }
        },


        methods:{
            handleClose (done) {
                this.$messagebox.confirm('确认关闭？')
                    .then(_ => { done() })
                    .catch(_ => {})
                },
            add () {
                this.inputValue = JSON.parse(JSON.stringify(this.inputValue1))// 对inputValue1的值进行转义并赋值给inputValue,避免内存冲突
                for (var i in this.inputValue) {
                    if (this.inputValue1[i] !== null) {
                    this.tableData.push(this.inputValue)
                    this.dialogVisible[1].addPage = false
                    this.inputValue1[i] = null
                    return
                    }
                }
                if (this.inputValue[i] == null) {
                    alert('请输入至少一项数据!!!')
                    this.dialogVisible[1].addPage = true
                }
            },
            upSearchData(){
                console.log(this.searchData)
                this.dialogVisible[0].searchPage = false
            },
            // 删除当前行数据
            delteleitem (scope) {
                const index = scope.$index
                this.$messagebox.confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error'
                }).then(() => {
                    this.tableData.splice(index, 1)
                    this.theHope()
                    this.$message({ type: 'success', message: '删除成功!' })
                }).catch(() => {
                    this.$message({ type: 'info', message: '已取消删除' })
                })
            },
            getDetails (row) { this.row = row }, // 获取表格当前行的数据


            // 改变每页显示的数据数
            handleSizeChange (newSize) {
                this.queryInfo.pagesize = newSize;
            },
            // 改变页码值
            handleCurrentChange (newPage) {
                this.queryInfo.pagenum = newPage;
            },
            theHope () {
                if (this.tableData.length == 0) {
                    this.row = { overbit: "请叫我:'全村的希望!'/(°ω°)/" }
                    this.tableData.push(this.row)
                    alert('别删啦,再删没有啦!!!')
                }
            }
        }
    }
</script>

<style Lang="less" scoped>
    .demo-table-expand{
        font-size: 10px;
    }
    .el-form>>>.el-form-item__label{
        width: 90px;
        color: #000000;
    }
    .demo-table-expand .el-form-item{
        margin-right: 0;
        margin-bottom: 0;
        width: 20%;
    }
</style>
